import React, { Component } from "react";
import { Menu, Switch, Layout } from "antd";
import { withRouter } from "react-router-dom";
import {
  SendOutlined,
  FileOutlined,
  FileTextOutlined,
  HomeOutlined,
} from "@ant-design/icons";
import "./MySider.css"

const { SubMenu } = Menu;
const { Sider } = Layout;

class MySider extends Component {
  state = {
    theme: "dark",
    current: "1",
    openKeys: ["sub1"],
  };
  rootSubmenuKeys = ["sub1", "sub2", "sub3", "sub4"];
  // 用于父menu聚焦
  onOpenChange = (keys) => {
    const latestOpenKey = keys.find(
      (key) => this.state.openKeys.indexOf(key) === -1
    );
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys: keys });
    } else {
      this.setState({ openKeys: latestOpenKey ? [latestOpenKey] : [] });
    }
  };

  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };

  handleClick = (e) => {
    console.log("click ", e);
    this.setState({
      current: e.key,
    });
    const path = e.key.toString();
    this.props.history.push({
      pathname: path,
    });
  };

  render() {
    const { trigger, collapsible, collapsed } = this.props;
    return (
      <Sider
        theme={this.state.theme}
        trigger={trigger}
        collapsible={collapsible}
        collapsed={collapsed}
      >
        <br />
        <br />
        <br />
        <Menu
          theme={this.state.theme}
          onClick={this.handleClick}
          mode="inline"
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          selectedKeys={[this.state.current]}
          onOpenChange={this.onOpenChange}
          openKeys={this.state.openKeys}
        >
          <Menu.Item key="/Home" icon={<HomeOutlined />}>
            主页
          </Menu.Item>
          <Menu.Item key="/Home/inquirymanagement" icon={<FileOutlined />}>
            询价单管理
          </Menu.Item>
          <Menu.Item
            key="/Home/quotationmanagement"
            icon={<FileTextOutlined />}
          >
            报价单管理
          </Menu.Item>
          <Menu.Item key="/Home/ordermanagement" icon={<SendOutlined />}>
            订单管理
          </Menu.Item>
        </Menu>
        <Switch
            checked={this.state.theme === "dark"}
            onChange={this.changeTheme}
            checkedChildren="Dark"
            unCheckedChildren="Light"
            style={{ position: 'fixed', bottom: '30px' }}
        />
      </Sider>
    );
  }
}
export default withRouter(MySider);
